<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>房态界面</title>
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.bookroom {
	width: 1000px;
	height: 100px;
	background: -webkit-linear-gradient(top,gray); 
	border-radius: 10px;
}
.bg {
	width: 100px;
	height: 100px;
	background: -webkit-linear-gradient(top, lawngreen, greenyellow, green); 
	border-radius: 10px;
}

.roomno {
	position: relative;
	margin-left: 25px;
	margin-top: 15px;
	font-size: 30px;
}

.roomtype {
	position: relative;
	margin-left: 27px;
	margin-top: 5px;
	font-size: 15px;
	color: dimgrey;
}

.roomsalary {
	position: relative;
	margin-left: 25px;
	margin-top: 0px;
	font-size: 20px;
	color: white;
}

.expireTitle {
	position: relative;
	margin-left: 35px;
	margin-top: 15px;
	font-size: 15px;
	color: white;
	display: none;
}


.orderid,.empname,.username,.usertel,.orderstartdate,.orderenedate,.days{
	position: relative;
	margin-left: 15px;
	font-size: 15px;
	color: dimgrey;
	display: none;
}

table {
	position: absolute;
	top: 0;
	left: 20%;
	margin-top: 50px;
}

tr td {
	padding: 15px;
}
/*设置登录窗口层隐藏样式*/
#updateUser {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 1;
	margin-top: -250px;
	margin-left: -250px;
	display: none;
	/*设置修改窗口样式*/
	background-color: rgb(210, 248, 228);
	width: 500px;
	height: 500px;
}
/*设置模糊层样式*/
#blur {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	/*设置模糊*/
	filter: blur(2px);
	/*设置透明度*/
	opacity: 0.5;
	display: none;
}

#message {
	margin-left: 10px;
	margin-top: 30px;
}

.closebtn {
	position: relative;
	left: 30%;
}

.userNamesize {
	width: 200PX;
}

.roomSalarySize {
	width: 100px;
}

.roomState {
	width: 200PX;
}

.roomRemark {
	width: 300PX;
}
</style>
</head>
<body>

<!--已入住窗口(弹出窗)-->
<div id="alreadyman" style="display: none">
		<form class="layui-form" action="" lay-filter="example">
		<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">当前房间</label>
      <div class="layui-input-inline">
        <input type="text" name="roomno" id="roomno"   autocomplete="off" class="layui-input" readonly="readonly">
      </div>
    </div>
   <div class="layui-inline">
      <label class="layui-form-label">房型</label>
      <div class="layui-input-inline">
        <input type="text" name="roomtype" id="roomtype"   autocomplete="off" class="layui-input" readonly="readonly">
      </div>
    </div>
  
    <div class="layui-inline">
      <label class="layui-form-label">经办人员</label>
      <div class="layui-input-inline">
        <input type="text" name="empname" id="empname"   autocomplete="off" class="layui-input" readonly="readonly">
      </div>
    </div>
  </div>
    <div class="layui-form-item">
				<label class="layui-form-label">入住人员</label>
				<div class="layui-input-block">
					<input type="text" name="username" id="username" lay-verify="title"
						autocomplete="off" placeholder="" class="layui-input" readonly="readonly" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">联系电话</label>
				<div class="layui-input-block">
					<input type="text" name="usertel" id="usertel" lay-verify="title"
						autocomplete="off" placeholder="" class="layui-input" readonly="readonly">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">订单id</label>
				<div class="layui-input-block">
					<input type="text" name="orderid" id="orderid" lay-verify="title"
						autocomplete="off" placeholder="" class="layui-input" readonly="readonly">
				</div>
			</div>
  <div class="layui-inline">
      <label class="layui-form-label">入住时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="orderstartdate" name="orderstartdate" placeholder="yyyy-MM-dd" readonly="readonly">
      </div>
    </div>
       <div class="layui-inline">
      <label class="layui-form-label">退房时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="orderenedate" name="orderenedate" placeholder="yyyy-MM-dd" readonly="readonly">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">消费总额</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="salary" name="salary">
      </div>
    </div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="checkOut">退房</button>
				</div>
			</div>
		</form>
	</div>
		<!--预定要办理入住的窗口-->
		<div id="bookchenin" style="display: none">
		<form class="layui-form" action="" lay-filter="example">
		<div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">当前房间</label>
      <div class="layui-input-inline">
        <input type="text" name="roomno1" id="roomno1"   autocomplete="off" class="layui-input" readonly="readonly">
      </div>
    </div>
   <div class="layui-inline">
      <label class="layui-form-label">房型</label>
      <div class="layui-input-inline">
        <input type="text" name="roomtype1" id="roomtype1"   autocomplete="off" class="layui-input" readonly="readonly">
      </div>
    </div>
  
    <div class="layui-inline">
      <label class="layui-form-label">经办人员</label>
      <div class="layui-input-inline">
        <input type="text" name="empname1" id="empname1"   autocomplete="off" class="layui-input" readonly="readonly">
      </div>
    </div>
  </div>
    <div class="layui-form-item">
				<label class="layui-form-label">入住人员</label>
				<div class="layui-input-block">
					<input type="text" name="username1" id="username1" lay-verify="title"
						autocomplete="off" placeholder="" class="layui-input" readonly="readonly" >
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">联系电话</label>
				<div class="layui-input-block">
					<input type="text" name="usertel1" id="usertel1" lay-verify="title"
						autocomplete="off" placeholder="" class="layui-input" readonly="readonly">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">订单id</label>
				<div class="layui-input-block">
					<input type="text" name="orderid1" id="orderid1" lay-verify="title"
						autocomplete="off" placeholder="" class="layui-input" readonly="readonly">
				</div>
			</div>
  <div class="layui-inline">
      <label class="layui-form-label">入住时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="orderstartdate1" name="orderstartdate" placeholder="yyyy-MM-dd" readonly="readonly">
      </div>
    </div>
       <div class="layui-inline">
      <label class="layui-form-label">退房时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="orderenedate1" name="orderenedate" placeholder="yyyy-MM-dd" readonly="readonly">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">已付金额</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="salary1" name="salary1">
      </div>
    </div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="checkIn">入住</button>
				</div>
			</div>
		</form>
	</div>
		
	<table border="0" cellspacing="0" cellpadding="-10px">
	<c:forEach var="i"  begin="1" end="3">
	<tr>
		<c:forEach items="${list}" var="e">
		<c:if test="${e.roomno/100>i && e.roomno/100<i+1 }">
		<td>
					<div class="bg">
<!-- 					房间状态 -->
					<div class="expireTitle">
					<c:set var="nowDate" value="<%=new Date()%>"></c:set>
					<fmt:formatDate var="dates" value="${nowDate}" pattern="yyyy-MM-dd"/>
					<c:if test="${e.roomstatus==1 && dates!=e.orderenedate}">入住</c:if>
					<c:if test="${e.roomstatus==1 && dates==e.orderenedate}">到期</c:if>
					<c:if test="${e.roomstatus==2}">预定</c:if>
					</div> 
					
<!-- 					房间号           -->
					<div class="roomno">${e.roomno}</div>
<!-- 					房间类型 -->
					<div class="roomtype"> 
						<c:if test="${e.roomtype==0}">总统套房</c:if>
						<c:if test="${e.roomtype==1}">单人间</c:if>
						<c:if test="${e.roomtype==2}">双人间</c:if>
						<c:if test="${e.roomtype ==3}">三人间</c:if>
						</div>
						<div class="roomsalary">￥${e.roomsalary}</div>
						<div class="orderstartdate">${e.orderstartdate}</div>
						<div class="orderenedate">${e.orderenedate}</div>
						<div class="usertel">${e.usertel}</div>
						<div class="days">${e.days}</div>
						<div class="username">${e.username}</div>
						<div class="empname">${e.empname}</div>
						<div class="orderid">${e.orderid}</div>
					</div>
				</td>
		</c:if>
				
		</c:forEach>
		</tr>
</c:forEach>
	</table>
	
<script src="layuiadmin/layui/layui.js" charset="utf-8"></script>	
	<script type="text/javascript">
	layui.use(['layer','form'], function(){ 
		var layer = layui.layer
		,form = layui.form;
	$(document).ready(function my() {
		//根据每天房间不同的状态，修改背景颜色
		$(".expireTitle").each(function(){ 
			if($(this).text().trim()=="入住" || $(this).text().trim()=="到期"){//入住状态
				$(this).show();
				$(this).next().css("margin-top", "-5px");
			 $(this).parent("div").css("background","-webkit-linear-gradient(top,darkred,#D2691E)");
			}else if($(this).text().trim()=="预定"){//预约状态
				$(this).show();
				$(this).next().css("margin-top", "-5px");
			 $(this).parent("div").css("background", "-webkit-linear-gradient(top,lightsalmon,lightsalmon,#EB7350)");
			}
		});
		//点击房间时，显示隐藏的窗口
		$(".bg").each(function(){ 
		$(this).click(function() {
          var x=$(this).children(".expireTitle").text().trim();//得到当前点击的房间的状态
          console.log(x);
          if(x=="入住" || x=="到期"){
			$("#roomno").attr("value", $(this).children(".roomno").text());
			$("#roomtype").attr("value", $(this).children(".roomtype").text().trim());
			$("#empname").attr("value", $(this).children(".empname").text());
			$("#username").attr("value", $(this).children(".username").text());
			$("#usertel").attr("value", $(this).children(".usertel").text());
			$("#orderid").attr("value", $(this).children(".orderid").text());
			$("#orderstartdate").attr("value", $(this).children(".orderstartdate").text());
			$("#orderenedate").attr("value", $(this).children(".orderenedate").text());
			$("#salary").attr("value", ($(this).children(".days").text())*($(this).children(".roomsalary").text().replace("￥","")));
			var index1 = layer.open({
				title:"退房",
				type : 1,
				skin:'layui-layer-rim',
				content : $("#alreadyman"),
			});
			//只有加了这一句，表单的复选框，单选框才可以编辑
			layui.form.render();
			//监听提交
			layui.form.on('submit(checkOut)', function(data) {
				var d = data.field;
				$.ajax({
					type : "get",
					url : "checkOut",
					data : {
						"roomno":d.roomno,
						"orderid":d.orderid,
					},
					success : function(data) {
						if (data.msg == "退房成功") {
							layer.msg(data.msg, {
								time : 1000
							}, function() {
								layer.close(index1);
								location.reload();  
							});

						} else {
							layer.msg(data.msg);
						}
					}
				});

				return false;
			});
		}
          
          else if(x=="预定"){//当天是预定状态，服务人员得电话确认是否要chenIn
        		$("#roomno1").attr("value", $(this).children(".roomno").text());
    			$("#roomtype1").attr("value", $(this).children(".roomtype").text().trim());
    			$("#empname1").attr("value", $(this).children(".empname").text());
    			$("#username1").attr("value", $(this).children(".username").text());
    			$("#usertel1").attr("value", $(this).children(".usertel").text());
    			$("#orderid1").attr("value", $(this).children(".orderid").text());
    			$("#orderstartdate1").attr("value", $(this).children(".orderstartdate").text());
    			$("#orderenedate1").attr("value", $(this).children(".orderenedate").text());
    			$("#salary1").attr("value", ($(this).children(".days").text())*($(this).children(".roomsalary").text().replace("￥","")));
    			var index1 = layer.open({
    				title:"办理入住",
    				type : 1,
    				skin:'layui-layer-rim',
    				content : $("#bookchenin"),
    			});
    			//只有加了这一句，表单的复选框，单选框才可以编辑
    			layui.form.render();
    			//监听提交
    			layui.form.on('submit(checkIn)', function(data) {
    				var d = data.field;
    				console.log(d);
    				$.ajax({
    					type : "get",
    					url : "checkIn",
    					data : {
    						"roomno":d.roomno1,
    						"orderid":d.orderid1,
    					},
    					success : function(data) {
    						if (data.msg == "入住成功") {
    							layer.msg(data.msg, {
    								time : 1000
    							}, function() {
    								layer.close(index1);
    								location.reload();  
    							});

    						} else {
    							layer.msg(data.msg);
    						}
    					}
    				});

    				return false;
    			});
			
          }
          
          else{//为空房状态，可以预定
        	  
          }
          
          
		});
	});

		
	});
	});//layui
		</script>
		<script type="text/javascript">
		layui.use('laydate', function () {
			var laydate = layui.laydate;
			laydate.render({
				elem : '#orderstartdate'
			});
			laydate.render({
				elem : '#orderenedate'
			});
			
		});
	</script>
</body>
</html>